
<template>
  <el-dialog
    v-model="conf.visible"
    title="添加 功能菜单"
    width="30%"
    draggable
    :before-close="hide"
  >
    <el-form :model="form" size="small" ref="form" :rules="rules">
      <!--系统 下拉控件 -->
      <el-form-item
        prop="sys_id"
        label="系统"
        label-width="100px"
        label-position="right"
      >
        <el-select
          v-model="form.sys_id"
          style="width: 100%"
          filterable
          clearable
          placeholder="请选择系统"
        >
          <el-option
            v-for="item in sys_idList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!--类型 下拉控件 -->
      <el-form-item
        prop="menu_type"
        label="类型"
        label-width="100px"
        label-position="right"
      >
        <el-select
          v-model="form.menu_type"
          style="width: 100%"
          filterable
          clearable
          placeholder="请选择类型"
        >
          <el-option
            v-for="item in menu_typeList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!--名称 输入控件 -->
      <el-form-item
        prop="name"
        label="名称"
        label-width="100px"
        label-position="right"
      >
        <el-input
          clearable
          style="width: 100%"
          v-model="form.name"
          maxlength="64"
          placeholder="请输入名称"
        />
      </el-form-item>

      <!--地址 输入控件 -->
      <el-form-item
        prop="path"
        label="地址"
        label-width="100px"
        label-position="right"
      >
        <el-input
          clearable
          style="width: 100%"
          v-model="form.path"
          maxlength="256"
          type="textarea"
          show-word-limit
          placeholder="请输入地址"
        />
      </el-form-item>

      <!--图标 输入控件 -->
      <el-form-item
        prop="icon"
        label="图标"
        label-width="100px"
        label-position="right"
      >
        <el-input
          clearable
          style="width: 100%"
          v-model="form.icon"
          maxlength="64"
          placeholder="请输入图标"
        />
      </el-form-item>

      <!--排序 数字控件 -->
      <el-form-item
        prop="sortrank"
        label="排序"
        label-width="100px"
        label-position="right"
      >
        <el-input-number style="width: 100%" v-model="form.sortrank" />
      </el-form-item>

      <!--展开 switch控件 -->
      <el-form-item
        prop="is_open"
        label="展开"
        label-width="100px"
        label-position="right"
      >
        <el-switch v-model="form.is_open_switch" />
      </el-form-item>

      <!--状态 switch控件 -->
      <el-form-item
        prop="enable"
        label="状态"
        label-width="100px"
        label-position="right"
      >
        <el-switch v-model="form.enable_switch" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="hide">取消</el-button>
        <el-button type="primary" @click="save">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      conf: {
        visible: false,
        uploadPath: this.$theia.env.join("/file/upload"),
      },
      rules: {
        sys_id: [
          {
            required: true,
            message: "请输入系统",
            trigger: "blur",
          },
        ],
        menu_type: [
          {
            required: false,
            message: "请输入类型",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        path: [
          {
            required: true,
            message: "请输入地址",
            trigger: "blur",
          },
        ],
        icon: [
          {
            required: false,
            message: "请输入图标",
            trigger: "blur",
          },
        ],
        sortrank: [
          {
            required: true,
            message: "请输入排序",
            trigger: "blur",
          },
        ],
        is_open: [
          {
            required: false,
            message: "请输入展开",
            trigger: "blur",
          },
        ],
        enable: [
          {
            required: true,
            message: "请输入状态",
            trigger: "blur",
          },
        ],
      },
      form: {
        sys_id: "",
        menu_type: "",
        name: "",
        path: "",
        icon: "",
        sortrank: "",
        is_open_switch: false,
        enable_switch: false,
      },
      sys_idList: this.$theia.enum.get("system_info"),
      menu_typeList: this.$theia.enum.get("menu_type"),
    };
  },
  methods: {
    show(fm) {
      console.log("menu.add.ext:",fm)
      this.form.parent = fm.id || 0;
      this.form.level_id = (parseInt(fm.level_id) ?? -1) + 1;
      this.form.sys_id = fm.sys_id;
      this.conf.visible = true;
    },
    save() {
      this.form.is_open = this.form.is_open_switch ? 0 : 1;
      this.form.enable = this.form.enable_switch ? 0 : 1;
      this.$refs.form.validate((v) => {
        if (v) {
          this.onSave();
        }
      });
    },
    onSave() {
      let that = this;
      this.$theia.http
        .post("/systemmenu", this.form)
        .then((res) => {
          that.$notify.success({
            title: "成功",
            message: "功能菜单保存成功",
            duration: 5000,
          });
          that.$emit("onsaved");
          that.hide();
        })
        .catch((res) => {
          let code = res.response.status;
          let msg = `功能菜单保存失败(${code})`;
          that.$notify.error({ title: "失败", message: msg, duration: 5000 });
        });
    },
    hide() {
      this.conf.visible = false;
      this.$refs.form.resetFields();
    },
    onUploadSuccess(response) {},
  },
};
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>